<template name="skeleton">
  <view class="sk-container">
    <view is="pages/index/components/CustomNavbar">
      <view class="navbar CustomNavbar--navbar" style="padding-top: 44px">
        <view class="logo CustomNavbar--logo">
          <image class="logo-image CustomNavbar--logo-image sk-image"></image>
          <text class="logo-text CustomNavbar--logo-text sk-transparent sk-text-3-5714-843 sk-text"
            >新鲜 · 亲民 · 快捷</text
          >
        </view>
        <view class="search CustomNavbar--search">
          <text
            class="icon-search CustomNavbar--icon-search sk-transparent sk-text-14-2857-121 sk-text sk-pseudo sk-pseudo-circle"
            >搜索商品</text
          >
          <text class="icon-scan CustomNavbar--icon-scan sk-pseudo sk-pseudo-circle"></text>
        </view>
      </view>
    </view>
    <scroll-view refresher-enabled="true" scroll-y="true" class="scroll-view scroll-view">
      <view is="components/XtxSwiper">
        <view class="carousel XtxSwiper--carousel">
          <swiper circular="true" interval="3000" current="0" autoplay="false">
            <swiper-item
              style="
                position: absolute;
                width: 100%;
                height: 100%;
                transform: translate(0%, 0px) translateZ(0px);
              "
            >
              <navigator class="navigator XtxSwiper--navigator" hover-class="none">
                <image class="image XtxSwiper--image sk-image" mode="aspectFill"></image>
              </navigator>
            </swiper-item>
          </swiper>
          <view class="indicator XtxSwiper--indicator">
            <text class="dot XtxSwiper--dot active XtxSwiper--active"></text>
            <text class="dot XtxSwiper--dot"></text>
            <text class="dot XtxSwiper--dot"></text>
            <text class="dot XtxSwiper--dot"></text>
            <text class="dot XtxSwiper--dot"></text>
          </view>
        </view>
      </view>
      <view is="components/XtxGuess" class="r r">
        <view class="caption XtxGuess--caption">
          <text
            class="text XtxGuess--text sk-transparent sk-text-0-0000-790 sk-text sk-pseudo sk-pseudo-circle"
            >猜你喜欢</text
          >
        </view>
        <view class="guess XtxGuess--guess">
          <navigator class="guess-item XtxGuess--guess-item">
            <image class="image XtxGuess--image sk-image" mode="aspectFill"></image>
            <view class="name XtxGuess--name sk-transparent sk-text-14-2857-427 sk-text"
              >办公居家必备，3A3U智能插线板</view
            >
            <view class="price XtxGuess--price">
              <text class="small XtxGuess--small sk-transparent sk-opacity">¥</text>
              <text class="sk-transparent sk-text-0-0000-899 sk-text">59.00</text>
            </view>
          </navigator>
          <navigator class="guess-item XtxGuess--guess-item">
            <image class="image XtxGuess--image sk-image" mode="aspectFill"></image>
            <view class="name XtxGuess--name sk-transparent sk-text-14-2857-975 sk-text"
              >木桐正牌干红葡萄酒750毫升2016年</view
            >
            <view class="price XtxGuess--price">
              <text class="small XtxGuess--small sk-transparent sk-opacity">¥</text>
              <text class="sk-transparent sk-text-0-0000-235 sk-text">7799.00</text>
            </view>
          </navigator>
          <navigator class="guess-item XtxGuess--guess-item">
            <image class="image XtxGuess--image sk-image" mode="aspectFill"></image>
          </navigator>
          <navigator class="guess-item XtxGuess--guess-item">
            <image class="image XtxGuess--image sk-image" mode="aspectFill"></image>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<style scoped>
.sk-transparent {
  color: transparent !important;
}
.sk-text-3-5714-843 {
  background-image: linear-gradient(
    transparent 3.5714%,
    #eeeeee 0%,
    #eeeeee 96.4286%,
    transparent 0%
  ) !important;
  background-size: 100% 28rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-121 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}
.sk-text-0-0000-790 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 32rpx;
  position: relative !important;
}
.sk-text-14-2857-427 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-opacity {
  opacity: 0 !important;
}
.sk-text-0-0000-899 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 26rpx;
  position: relative !important;
}
.sk-text-14-2857-975 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}
.sk-text-0-0000-235 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 26rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
